import { Component, Prop, Emit, Watch, Ref } from 'vue-facing-decorator'
import Render from '@/render/Render'
import toNative from '@/utils/toNative'
import TableRender from '@/render/TableRender'
import { getModelValue, renderForm, initModelValue, type FormModalDto } from '@/components/modal/Modal'
import { resetPassword } from '@/api/login'

import userStore from '@/stores/user'
import { Button, message } from 'ant-design-vue'
import { Dialog } from '@/components/dialog/Index'


export interface TagDto {
    value: string
    editable: boolean
}

@Component
export class LogoutView extends TableRender {
    @Prop({ default: false }) show?: boolean

    @Prop() modelValue?: string

    @Prop({ default: '' }) placeholder?: string

    visible = false

    @Emit('update:modelValue')
    handleEmitData(value: string) {
        return value
    }

    @Emit('update:show')
    handleEmitShow(value: boolean) {
        return value
    }

    @Watch('show')
    watchShowChange(value: boolean) {
        this.visible = value
    }

    @Watch('visible')
    watchVisibleChange(value: boolean) {
        this.handleEmitShow(value)
        if(!value) {
            this.onCancel()
        }
    }

    @Watch('modelValue')
    watchModelValue(newValue: string) {
        console.log(1111, newValue)
    }

    @Watch('editValue')
    watchValueChange(newval: string) {
        this.handleEmitData(newval)
    }

    basicFormConfig = this.initFormConfig() as FormModalDto
    basicForm = {
        validate: async () => {},
        clear: () => {},
        element: () => <> </>
    }

    initFormConfig() {
        return {
            title: '',
            show: true,
            theme: 'light',
            spanAlign: 'top',
            innerWidth: '300px',
            items: {
                oldPassword: {
                    name: '旧密码',
                    width: '400px',
                    element: 'input',
                    type: 'password',
                    placeholder: '请输入登录密码',
                    required: true,
                    rules: [
                        {
                            validator: (rule: any, value: string, callback: any) => {
                                if (value && this.basicFormConfig.items.newPassword && value === this.basicFormConfig.items.newPassword.value) {
                                    callback('新密码和旧密码不能相同')
                                }
                                callback()
                            },
                        }
                    ],
                    callback: {
                        input: () => {
                            this.basicFormConfig.items.oldPassword.value = (this.basicFormConfig.items.oldPassword.value as string)?.replace(/\s/g, '')
                        }
                    }
                },
                newPassword: {
                    name: '新密码',
                    width: '400px',
                    element: 'input',
                    type: 'password',
                    placeholder: '请输入新的登录密码',
                    required: true,
                    rules: [
                        {
                            min: 6,
                            max: 16,
                            trigger: 'blur',
                            message: '请输入6-16位密码'
                        },
                        {
                            validator: (rule: any, value: string, callback: any) => {
                                console.log(222, value)
                                if (value && this.basicFormConfig.items.oldPassword && value === this.basicFormConfig.items.oldPassword.value) {
                                    callback('新密码和旧密码不能相同')
                                }
                                callback()
                            },
                        }
                    ],
                    callback: {
                        input: () => {
                            this.basicFormConfig.items.newPassword.value = (this.basicFormConfig.items.newPassword.value as string)?.replace(/\s/g, '')
                        }
                    }
                },
            },
            complete: () => {
                console.log(2121, getModelValue(this.basicFormConfig))
            },
            cancel: () => {
                this.onCancel()
            }
        } as FormModalDto
    }

    onCancel() {
        this.basicForm.clear()
        initModelValue(this.basicFormConfig, {})
        this.visible = false
    }

    async onSubmit() {
        await this.basicForm.validate()
        await resetPassword(getModelValue(this.basicFormConfig))
        message.success('修改成功')
        this.onCancel()
        userStore().logout()
    }

    async onMounted() {
        this.basicForm = renderForm(this.basicFormConfig)
    }

    render() {
        return (
            <Dialog
                width={'480px'}
                v-model={this.visible}
                title="修改密码"
                closeOnClickModal={false}
                destroyOnClose={true}
            >
                {this.basicForm.element()}
                <div class="flex justify-center">
                    <Button onClick={this.onCancel}>取消</Button>
                    <Button type="primary" onClick={this.onSubmit}>保存</Button>
                </div>
            </Dialog>
        )
    }
}

export default toNative<{}, { click: (data: any) => void }>(LogoutView)
